<template>
  <div class="gramos-index" @click="notify = false">
    <!-- begin::side menu -->
    <div class="side-menu">
      <div class='side-menu-body'>
        <ul class="scroll-scrollbar-style">
          <li class="side-menu-divider custom-navigation">
            <i class="icon el-icon-s-home" style="font-size: 24px; padding-bottom: 3px; "></i>
            <router-link to="/" class="nav-link" style="position: fixed;">
              <span class="custom-navigation-text">返回首页</span>
            </router-link>
          </li>
          <li class="side-menu-divider">
            <div style="padding: 18px 0 10px 30px;" data-toggle="dropdown">
              <figure class="avatar avatar-sm avatar-state-success">
                <template v-if="$session.avatar">
                  <e-img :src="$session.avatar" class="rounded-circle"></e-img>
                </template>
                <template v-else>
                  <img class="rounded-circle" src="~@/assets/gramos/avatar.jpg" alt="...">
                </template>
              </figure>
              <span style="padding-left: 10px; color: #666; font-size: 16px;">{{ $session.username }}</span>
            </div>
          </li>
          <li v-for="(m, k) in menus">
            <!--                        <a href="javascript:;" class="nav-top-item" @click="active=k == active?-1:k">-->
            <a href="javascript:;" class="nav-top-item" @click="toggleMenu(k)"
              v-if="m.label != '线路预定' && m.label != '酒店预定'">
              <i class="icon" :class="m.icon"></i>
              <span v-text="m.label"></span>
              <i style="padding-left: 40px;"
                :class="['sub-menu-arrow', { 'fa fa-angle-right': k !== active, 'fa fa-angle-down': k === active }]"></i>
            </a>
            <router-link :to="m.to" class="nav-top-item" v-else>
              <i class="icon" :class="m.icon"></i>
              <span v-text="m.label"></span>
            </router-link>
            <ul v-show="k == active">
              <li v-for="c in m.children">
                <router-link :to="c.to" active-class="active" v-text="c.label" style="color: #666;">
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- end::side menu -->

    <!-- begin::navbar -->
    <nav class="navbar">
      <div class="header-logo">
        <div>
          <span class="logo-text d-none d-lg-block">
            <i class="el-icon-user-solid" style="padding-right:5px; font-size: 14px;"></i>个人中心
          </span>
          <span href="javascript:;" class="logo-text d-none d-lg-block" style="color: #7fabbe;">
            欢迎{{ $session.cx }}{{ $session.username }}
          </span>
          <a href="javascript:;" @click="logout" class="logo-text d-none d-lg-block" title="退出登录">
            退出
          </a>
        </div>
      </div>
      <div class="header-body">
        <ul class="navbar-nav">

        </ul>
      </div>

    </nav>
    <!-- end::navbar -->

    <!-- begin::main content -->
    <main class="main-content">
      <div class="main-content-iframe scroll-scrollbar-style">
        <router-view></router-view>
      </div>
    </main>
    <!-- end::main content -->
  </div>
</template>
<style type="type/scss" lang="scss">
@import "app";

.gramos-index {
  .el-icon-s-home {
    color: #666;

    &:hover {
      color: #7fabbe !important;
    }
  }

  .nav-link {
    .custom-navigation-text {
      color: #666;
    }

    &:hover {
      .custom-navigation-text {
        color: #7fabbe;
      }
    }
  }
}
</style>
<script>
import setting from '@/setting'
import menu from "@/views/admin/sidebar";
import api from "@/api";

export default {
  name: "gramos-index",
  data() {
    return {
      setting,
      notify: false,
      active: 0
    }
  },
  watch: {},
  computed: {
    menus() {
      var cx = this.$session.cx;
      return menu[cx];
    }
  },
  methods: {
    toggleMenu(index) {
      this.active = this.active === index ? -1 : index;
    },
    logout() {
      this.$confirm('确定退出登录？', '确认信息').then(() => {
        // 退出登录
        this.$store.dispatch('user/logout').then(res => {
          if (res.code == api.code.OK) {
            this.$message.success('退出登录成功')
            this.$router.replace('/index')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err.message)
        });
      });
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      // this.isLoaded = false;
      if (!sessionStorage.getItem('isPageReloaded')) {
        sessionStorage.setItem('isPageReloaded', 'true');
        location.reload();
      } else {
        sessionStorage.removeItem('isPageReloaded');
        this.isLoaded = false;
      }
    }, 500);

  },
  destroyed() {
  }
}
</script>